<template>
	<view>
<!--		<view class="tab-fixed u-p-20 u-flex u-row-around u-col-center">-->
<!--			<view class="tab-item u-flex u-row-center u-col-center u-m-r-40" :class="is_choose==0?'active':''" @click="ontab(0)">视频课</view>-->
<!--			<view class="tab-item u-flex u-row-center u-col-center" :class="is_choose==1?'active':''" @click="ontab(1)">音频课</view>-->
<!--		</view>-->
		<view v-if="is_choose==0" class="content u-p-l-20 u-p-r-20">
			<view>
				<view class="group-fac u-flex u-row-between u-col-center" v-for="(item,index) in zhishiData" :key="index" @click="jump('/pages/finance/playback',{id:item.course.course_id})">
					<image class="left-img" :src="item.course.cover"></image>
					<view style="width: 80%;">
						<view class="leftgroup u-flex u-row-between u-col-center">
							<view class="left-project">{{ item.course.title }}</view>
						</view>
						<view class="left-title u-ellipsis-2" v-html="item.course.content"></view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadingType" class="u-p-b-80"></u-loadmore>
			<shopro-empty v-if="zhishiData.length==0" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无知识内容~"></shopro-empty>
		
		</view>
		<view v-if="is_choose==1" class="content u-p-l-20 u-p-r-20">
			<view>
				<view class="group-fac u-flex u-row-between u-col-center" @click="jump('/pages-user/user-factivor/project')">
					<image class="left-img" src="/static/images/user/shoucang/project.png"></image>
					<view style="width: 80%;">
						<view class="leftgroup u-flex u-row-between u-col-center">
							<view class="left-project">XX产业项目</view>
						</view>
						<view class="left-title u-ellipsis-2">小春科技，小春科技专业开发， 小春科技开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发</view>
					</view>
				</view>
				<view class="group-fac u-flex u-row-between u-col-center" @click="jump('/pages-user/user-factivor/project')">
					<image class="left-img" src="/static/images/user/shoucang/project.png"></image>
					<view style="width: 80%;">
						<view class="leftgroup u-flex u-row-between u-col-center">
							<view class="left-project">XX产业项目</view>
						</view>
						<view class="left-title u-ellipsis-2">小春科技，小春科技专业开发， 小春科技开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发小春科技，小春科技专业开发</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadingType" class="u-p-b-80"></u-loadmore>
		</view>
<!--		<view class="bottom-group">-->
<!--			<view class="bottom-btn u-flex u-flex-col u-row-center u-col-center" @click="jumpTo(vipData.viplist[0])">-->
<!--				<view class="btn-title">{{vipData.viplist[0].name}}</view>-->
<!--				<view class="btn-price u-m-t-6">¥{{ vipData.viplist[0].price?vipData.viplist[0].price:'' }}/年</view>-->
<!--			</view>-->
<!--			<view class="bottom-btn u-flex u-flex-col u-row-center u-col-center"@click="jumpTo(vipData.viplist[1])">-->
<!--				<view class="btn-title">{{vipData.viplist[1].name}}</view>-->
<!--				<view class="btn-price u-m-t-6">¥{{ vipData.viplist[1].price?vipData.viplist[1].price:'' }}/年</view>-->
<!--			</view>-->
<!--		</view>-->
		
	</view>

</template>

<script>
export default {
	data() {
		return {
			is_choose:0,
			is_yige:0,
			page: 1, //分页加载
			loadingType: 'more', //加载更多状态
			zhishiData:[],
			vipData:{}
		};
	},
	onLoad(){
		this.getZhishi("refresh");
		this.getViplist();
	},
	methods:{
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		ontab(index){
			this.is_choose = index
		},
		ontabs(index){
			this.is_yige = index
		},
		getZhishi(type = 'add', loading) {
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else if (type === 'refresh') {
				this.loadingType = 'loading';
				this.page = 1;
				this.projectData = [];
			} else {
				this.loadingType = 'more';
			}
			
			let formData = {
				page: this.page,
				token: uni.getStorageSync('token')
			};
			this.$new_http('newuser.course',formData).then(res => {
				let zhishiList = res.data.data;
				this.page++;
				this.zhishiData = this.zhishiData.concat(zhishiList);
				this.loadingType = res.data.current_page >= res.data.last_page ? 'nomore' : 'more';
			});
		},
		getViplist() {
			let formData = {
				token: uni.getStorageSync('token')
			};
			this.$new_http('newuser.viplist',formData).then(res => {
				res.data.forEach((item)=>{
					if(item.name=='文创中心'){
						this.vipData =  item;
					}
				})
				
			});
		},
		jumpTo(item){
			uni.setStorageSync('order', item);
			this.jump('/pages/index/project_list/qrorder')
		}
		
	},
	//加载更多
	onReachBottom() {
		this.getZhishi();
	}
}
</script>

<style lang="scss">
page{
	background: #FBFAFA;
}
.tab-fixed{
	position: fixed;
	top: 0px;
	width: 100%;
	padding-top: 10px!important;
	padding-bottom: 10px!important;
	background:#FBFAFA;
	z-index: 1000;
	.tab-item{
		width: 33%;
		position:relative;
		&.active{
			color: #ED861F;
		}
		&.active::after{
			content: "";
			position:absolute;
			bottom: -20rpx;
			width: 30rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #ED861F;
		}
	}
}
.tab{
	margin-top: 45px!important;
	.tab-item{
		width: 50%;
		position:relative;
		font-size: 32rpx;
		&.active{
			color: #ED861F;
		}
		&.active::after{
			content: "";
			position:absolute;
			bottom: -20rpx;
			width: 40rpx;
			height: 10rpx;
			border-radius: 8rpx;
			background: #ED861F;
		}
	}
}
.content{
	border-radius: 20rpx;
	padding-bottom: 100rpx;
	//margin-top: 94rpx;
	.group-fac{
		background: #fff;
		border-bottom:2rpx solid #F0F0F0 ;
		margin: 20rpx 10rpx 0;
		padding: 30rpx 20rpx;
		border-radius: 18rpx;
		width: 97.5%;
		.left-img{
			width: 260rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}
		.leftgroup{
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
			.right{
				width:20rpx;
				height: 30rpx;
			}
		}
		.left-title{
			margin-top: 20rpx;
			font-weight: 500;
			font-size:26rpx;
			color: #999;
			line-height: 42rpx;
		}
		.num{
			font-size: 24rpx;
			color:#ED861F;
			margin-left: 18rpx;
		}
	}
}
.bottom-group{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.bottom-btn{
		width: 50%;
		padding: 10rpx 14rpx;
		border-radius: 20rpx;
		background: #ADCD2C;
		color: #fff;
		&:last-child{
			background: #ED861F;
		}
		.btn-price{
			font-size: 24rpx;
		}
	}
}
</style>
